const path = require("path"); // node.js 核心模块，专门用来处理路径问题

const ESLintWebpackPlugin = require("eslint-webpack-plugin");

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 入口
  entry: "./src/main.js", //相对路径
  // 出口
  output: {
    // 所有打包文件输出路径
    // __dirname: 当前文件所在的目录的绝对路径
    path: path.resolve(__dirname, "dist"), //绝对路径
    // 入口文件打包输出文件名
    filename: "js/main.js",
    // 允许删除之前打包的文件 与 path 相对应
    // 原理：在打包前，将 path 整个目录内容清空，再进行打包
    clean: true,
  },
  // 加载器
  module: {
    // loader 的配置
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/, //只检测 .css 文件
        // use 数组里面 Loader 执行顺序是从右到左
        use: [
          // 执行顺序 从右到左（从下到上）
          "style-loader", // 将 js（commonjs）中的 css 通过创建 style 标签添加到 html 文件中生效
          "css-loader", // 将 css 资源编译成 commonjs 的模块到js中
        ],
      },
      {
        test: /\.less$/, // 处理 .less 后缀的资源
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/, // 处理 .scss .sass 后缀资源
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        //处理图片资源，此处 file-loader 和 url-loader  webpack5.x 已经内置
        test: /\.(png|jpe?g|gif|webp|svg)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            // 小于 10kb 的图片转base64
            // 优点 减少请求数量
            // 缺点 体积比原来图片更大一点
            maxSize: 10 * 1024, //4kb
          },
        },
        generator: {
          // 输出图片名字  hash 值 10位  ext 文件扩展名 query 查询字符串（可不写）
          filename: "static/images/[hash:10][ext][query]",
        },
      },
      /**
       * type: "asset/resource"和type: "asset"的区别
       * 1. type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理
       * 2.type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式
       */
      {
        //处理其它资源
        test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  // 插件
  plugins: [
    //plugins 的配置
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
    new HtmlWebpackPlugin({
      // 模板，以 public/index.html 为模板创建新的 index.html 文件
      // 新的 html 文件特点：1.结构和原来的一致 2. 会自动引入打包的资源
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],
  // 开发服务器  命令 npx webpack serve
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },
  // 模式
  mode: "production", // production   development
};
